<template>
  <view class="index-container">
    <!-- 顶部轮播区域 -->
    <view class="top-section">
      <text class="section-title">TOP3事件</text>
      <swiper class="top-swiper" 
              :indicator-dots="true" 
              :autoplay="true" 
              :interval="3000" 
              :duration="500"
              :circular="true"
              indicator-active-color="#ffffff"
              indicator-color="rgba(255, 255, 255, 0.5)">
        <swiper-item v-for="(item, index) in topNews" :key="index" @tap="goToDetail(item)">
          <view class="swiper-item">
            <image :src="item.imageUrl" mode="aspectFill"></image>
            <view class="rank-tag">No.{{index + 1}}</view>
          </view>
        </swiper-item>
      </swiper>
    </view>

    <!-- 今日新闻区域 -->
    <view class="news-section">
      <view class="section-header">
        <text class="title">今日新闻</text>
        <text class="time">7:00准时更新</text>
      </view>

      <!-- 新闻列表 -->
     <view class="news-list">
        <view class="news-item" 
              v-for="(item, index) in newsList" 
              :key="index"
              @tap="goToDetail(item)">
          <view class="news-content">
            <text class="news-title">{{item.title}}</text>
            <text class="news-desc">{{item.description}}</text>
          </view>
          <image v-if="item.imageUrl" 
                 :src="item.imageUrl" 
                 mode="aspectFill" 
                 class="news-image"></image>
          <text class="read-more">详情</text>
        </view>
      </view>

      <view class="load-more" @tap="loadMore">更多短文</view>
    </view>

    <!-- 底部导航栏 -->
    <view class="tab-bar">
      <view class="tab-item" :class="{active: currentTab === 'home'}" @tap="switchTab('home')">
        <text class="iconfont"></text>
        <text>舟报</text>
      </view>
      <view class="tab-item" :class="{active: currentTab === 'my'}" @tap="switchTab('my')">
        <text class="iconfont"></text>
        <text>我的</text>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      currentTab: 'home',
      topNews: [
        {
          id: 1,
          title: '重要新闻1',
          imageUrl: 'https://pic1.zhimg.com/v2-e0ca937a1d3296e7463aa0aa096bef48_r.jpg'
        },
        {
          id: 2,
          title: '重要新闻2',
          imageUrl: 'https://pic1.zhimg.com/v2-e0ca937a1d3296e7463aa0aa096bef48_r.jpg'
        },
        {
          id: 3,
          title: '重要新闻3',
          imageUrl: 'https://pic1.zhimg.com/v2-e0ca937a1d3296e7463aa0aa096bef48_r.jpg'
        }
      ],
      newsList: [],
      page: 1,
      loading: false
    }
  },
  onLoad() {
    this.getNewsList()
  },
  // 下拉刷新
  onPullDownRefresh() {
    this.page = 1
    this.getNewsList().then(() => {
      uni.stopPullDownRefresh()
    })
  },
  // 上拉加载
  onReachBottom() {
    this.loadMore()
  },
  methods: {
    // 获取新闻列表
    async getNewsList() {
      if (this.loading) return
      this.loading = true
      try {
        // 这里替换为实际的API调用
        const res = await uni.request({
          url: 'your-api-url/news',
          data: {
            page: this.page,
            size: 10
          }
        })
        if (this.page === 1) {
          this.newsList = res.data
        } else {
          this.newsList = [...this.newsList, ...res.data]
        }
        this.page++
      } catch (error) {
        console.error('获取新闻列表失败', error)
      } finally {
        this.loading = false
      }
    },

    // 加载更多
    loadMore() {
      this.getNewsList()
    },

    // 跳转到详情页
    goToDetail(item) {
      uni.navigateTo({
        url: `/pages/detail/detail?id=${item.id}`
      })
    },

    // 切换底部标签
    // switchTab(tab) {
    //   if (tab === this.currentTab) return
    //   switch (tab) {
    //     case 'home':
    //       uni.switchTab({ url: '/pages/index/index' })
    //       break
    //     case 'collect':
    //       uni.switchTab({ url: '/pages/collect/collect' })
    //       break
    //     case 'my':
    //       uni.switchTab({ url: '/pages/my/my' })
    //       break
    //   }
    //   this.currentTab = tab
    // }
  }
}
</script>

<style lang="scss">
.index-container {
  min-height: 100vh;
  background-color: #f5f5f5;
  padding-bottom: 100rpx;

  .top-section {
    padding: 20rpx;
    
    .section-title {
      font-size: 32rpx;
      font-weight: bold;
      margin-bottom: 20rpx;
    }

    .top-swiper {
      height: 300rpx;
      border-radius: 12rpx;
      overflow: hidden;

      .swiper-item {
        position: relative;
        width: 100%;
        height: 100%;

        image {
          width: 100%;
          height: 100%;
        }

        .rank-tag {
          position: absolute;
          top: 20rpx;
          right: 20rpx;
          background-color: rgba(255, 255, 255, 0.9);
          padding: 4rpx 12rpx;
          border-radius: 20rpx;
          font-size: 24rpx;
        }
      }
    }
  }

  .news-section {
    padding: 20rpx;

    .section-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 20rpx;

      .title {
        font-size: 32rpx;
        font-weight: bold;
      }

      .time {
        font-size: 24rpx;
        color: #999;
      }
    }

    .news-list {
      .news-item {
        background-color: #fff;
        padding: 20rpx;
        margin-bottom: 20rpx;
        border-radius: 12rpx;
        display: flex;
        align-items: center;

        .news-content {
          flex: 1;
          margin-right: 20rpx;

          .news-title {
            font-size: 28rpx;
            font-weight: 500;
            margin-bottom: 10rpx;
            display: -webkit-box;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 2;
            overflow: hidden;
          }

          .news-desc {
            font-size: 24rpx;
            color: #999;
            display: -webkit-box;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 1;
            overflow: hidden;
          }
        }

        .news-image {
          width: 160rpx;
          height: 120rpx;
          border-radius: 8rpx;
        }

        .read-more {
          font-size: 24rpx;
          color: #666;
          padding: 4rpx 12rpx;
          border: 1px solid #ddd;
          border-radius: 20rpx;
        }
      }
    }

    .load-more {
      text-align: center;
      padding: 20rpx;
      color: #666;
      font-size: 28rpx;
    }
  }

  .tab-bar {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    height: 100rpx;
    background-color: #fff;
    display: flex;
    border-top: 1rpx solid #eee;

    .tab-item {
      flex: 1;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      font-size: 24rpx;
      color: #666;

      &.active {
        color: #007AFF;
      }

      .iconfont {
        font-size: 40rpx;
        margin-bottom: 4rpx;
      }
    }
  }
}
</style>